<template>
  <ul class="comments-list">
    <li class="comment-item bottom-1px" v-for="item in comments">
      <div class="comment-top bottom-1px">
        <div class="user-portrait">
          <span class="avatar"><img width="24" height="24" :src="item.user.avatarUrl"></span>
          <span class="username">{{ item.user.userName ? item.user.userName : item.user.mobile }}</span>
        </div>
        <span class="datetime">{{ item.createAt }}</span>
      </div>      
      <div class="score">
        <rater v-model="item.score" active-color="#f23030" :font-size="13" :margin="-1" disabled></rater>
      </div>
      <div class="comments-content">
        <p class="comments-text">{{ item.content }}</p>
        <div class="product-img-module clearfix" v-if="item.commentGallery.length > 0">
          <div class="img-slider-item" v-for="(img,index) in item.commentGallery" @click.stop="showPreviewer(item.commentGallery,item.content, index)" :key="index">
            <span class="img-holder"><img class="obj-cover" :src="img"></span>
          </div>
        </div>
      </div>
      <router-link :to="{ path: '/goods/detail', query: { id: item.id } }" class="product" v-if="showPro">
        <div class="product-img">
          <span class="img-holder"><img class="obj-cover" :src="item.imgCover" alt=""></span>
        </div>
        <div class="product-content">
          <h3 class="product-name">{{ item.title }}</h3>
        </div>
      </router-link>
    </li>
    <!-- 评论图片集 -->
    <previewer :list="list" :content="content" :cur="cur" ref="previewer"></previewer>
  </ul>
</template>

<script>
import { Rater, Group, Cell } from 'vux'
import { formatDate, toDecimal } from '@/utils/mUtils'
import Previewer from '@/components/public/Previewer'
export default {
  props: {
    comments: {
      type: Array,
      default: () => {
        return []
      }
    },
    showPro: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Rater,
    Group,
    Cell,
    Previewer
  }, 
  data () {
    return {
      list: [],
      content: '',
      cur: 0
    }
  },
  methods: {
    showPreviewer (item, content, index) {
      this.list = item
      this.content = content
      this.cur = index
      this.$refs.previewer.show()
    }
  },
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    toDecimal (val) {
      return toDecimal(val)
    }
  },
  mounted () {
    this.comments.map(item => {
      item.user.mobile = item.user.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      return item
    })
  } 
}
</script>

<style scoped>
.comment-item {
  background: #fff;
  padding: 10px 15px 15px 15px;
}
.comment-item:after {
  bottom: 0;
}
.comment-top {
  display: flex;
  padding: 0 15px 10px 15px;
  margin: 0 -15px;
}
.user-portrait {
  flex: 1;
  font-size: 0;
}
.avatar,.username {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  color: #333;
}
.avatar {  
  width: 24px;
  height: 24px;
  border-radius: 100%;
  overflow: hidden;
  margin-right: 5px;
}
.datetime {
  font-size: 13px;
  color: #848689;
  line-height: 24px;
}
.score {
  padding: 5px 0;
}
.comments-text {
  font-size: 13px;
  color: #333;
  line-height: 18px;
}
.product-img-module {
  padding-top: 8px;
  margin-right: -8px;
}
.img-slider-item {
  float: left;
  width: 25%;
  padding-right: 8px;
}
.img-holder {
  display: block;
  padding-bottom: 100%;
}
.product {
  display: flex;
  margin-top: 10px;
  background: #f5f5f5;
}
.product-img {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  overflow: hidden;
}
.product-content {
  flex: 1;
  margin-left: 8px;
  padding: 5px 8px 5px 0;
}
.product-name {
  font-size: 13px;
  color: #333;
  line-height: 18px;
  height: 36px;
  color: #666;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.params {
  font-size: 12px;
  color: #999;
}
.price {
  font-size: 16px;
  color: #333;
}
</style>
